<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-button
        type="primary"
        @click="handleAdd">添加</el-button>
      <el-button
        type="primary"
        @click="handleRefresh">刷新出库状态</el-button>
      <!--列表-->
      <el-table :data="DList" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="task_name" label="任务名称" sortable width="160px">
        </el-table-column>
        <el-table-column prop="perCount" label="每组人数" sortable width="120px">
        </el-table-column>
        <el-table-column prop="dCount" label="设备套数" sortable  width="120px">
        </el-table-column>
        <el-table-column prop="pObject_name" label="下发对象" sortable width="120px">
        </el-table-column>
        <el-table-column label="任务状态" sortable width="120px">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="!scope.row.status">历史任务</span>
            <span style="margin-left: 10px" v-else>当前任务</span>
          </template>
        </el-table-column>
        <el-table-column label="出库状态" sortable width="120px">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.warehouse_status===2">出库完成</span>
            <span style="margin-left: 10px" v-else-if="scope.row.warehouse_status===1">正在出库</span>
            <span style="margin-left: 10px" v-else-if="scope.row.warehouse_status===3">已过期</span>
            <el-button v-else
              size="small"
              @click="handleRetry(scope.row)">出库</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handleMonitor(scope.row)">查看进度</el-button>
            <el-button
              size="small"
              @click="handleStep(scope.row)">调整步骤</el-button>
            <!--<el-button-->
              <!--size="small"-->
              <!--@click="handleMonitor(scope.row)">仿真截图</el-button>-->
            <!--<el-button-->
              <!--size="small"-->
              <!--@click="handleMonitor(scope.row)">实验报告</el-button>-->
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <!--<el-table-column prop="age" label="name数量" width="100" sortable>-->
        <!--</el-table-column>-->
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
        </el-pagination>
      </el-col>

      <el-dialog title="任务下发" :visible.sync="dialogFormVisible" width="25%">
        <el-form :model="selectTable">
          <el-form-item label="任务名称" label-width="100px">
            <el-select v-model="selectTable.task_id" :placeholder="selectMenu.label">
              <el-option
                v-for="item in taskOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button @click="createtask()">+</el-button>
          </el-form-item>
          <el-form-item label="每组人数配置" label-width="100px" prop="perCount">
            <el-input v-model="selectTable.perCount" style="width: 200px">
            <template slot="append">人／组</template>
            </el-input>
          </el-form-item>
          <el-form-item label="下发设备套数" label-width="100px" prop="dCount">
            <el-input v-model="selectTable.dCount" style="width: 200px">
            <template slot="append">套</template>
            </el-input>
          </el-form-item>
          <el-form-item label="下发对象" label-width="100px">
            <el-select v-model="selectTable.pObject_id" :placeholder="selectMenuO.label" filterable>
              <el-option
                v-for="item in objectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="publishTask">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="进度查看"
        :visible.sync="dialogFormVisible0"
        >
        <el-table :data="MList.data" highlight-current-row v-loading="loading" style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="仿真状态">
                  <span v-for="i in props.row.sim">
                    <div>{{ i.name }}:{{i.value}}</div>
                  </span>
                </el-form-item>
                <el-form-item label="硬件状态">
                  <span v-for="i in props.row.real">
                    <div>{{ i.name }}:{{i.data}}</div>
                  </span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="member" label="成员" sortable>
          </el-table-column>
          <el-table-column label="进度" sortable>
            <template slot-scope="props"><el-progress :percentage=props.row.step width="50px"></el-progress></template>
          </el-table-column>

        </el-table>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible0 = false">取 消</el-button>
        <el-button type="primary" @click="freshTask">刷新</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="关键节点设置"
        :visible.sync="dialogFormVisible1">
        <el-transfer
          v-model="value1"
          :titles="['当前步骤', '调整步骤']"
          :data="data111">
        </el-transfer>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        </span>
      </el-dialog>


    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
  //  import {baseUrl, baseImgPath} from '@/config/env'
  import {getTaskList, getPublishList, getObjectListC, publishTask, publishDel, getVerifyResult, stockOut, stockStatus} from '@/api/api'
  export default {
    data () {
      return {
        value1: [],
        data111: [{label: '任务说明'},{label: '教程学习'},{label: '任务实训'},{label: '教程实训'},{label: '实验报告'}],
        selectTable: {
          task_id: '',
          perCount: '',
          dCount: '',
          pObject_id: '',
          status: 1,  // 新发布的任务默认为1
          warehouse_status: 0
        },
        dialogFormVisible: false,
        dialogFormVisible0: false,
        dialogFormVisible1: false,
        taskOptions: [],
        selectMenu: {},
        objectOptions: [],
        selectMenuO: {},
        DList: [],
        total: 0,
        page: 1,
        MList: {},
        selectIndex: null,
        selectIndexO: null
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    methods: {
      async initData () {
        this.loading = true
        try {
          getPublishList(this.page).then((res) => {
            this.total = res.data.count
            this.DList = res.data.results
            this.loading = false
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      handleCurrentChange (val) {
        this.page = val
        this.initData()
      },
      async getTaskList () {
        this.taskOptions = []
        try {
          getTaskList().then((res) => {
            res.data.forEach((item, index) => {
              this.taskOptions.push({
                label: item.name,
                value: item.id,
                index
              })
            })
          })
        } catch (err) {
          console.log('获取设备名称失败', err)
        }
      },
      async getObject () {
        this.objectOptions = []
        try {
          getObjectListC().then((res) => {
            res.data.results.forEach((item, index) => {
              this.objectOptions.push({
                label: item.name,
                value: item.id,
                index
              })
            })
          })
        } catch (err) {
          console.log('获取设备名称失败', err)
        }
      },
      async getMonitor (row) {
        this.MList = {}
        try {
          debugger
          getVerifyResult(row).then(res => {
            this.MList = res.data
          })
        } catch (err) {
          console.log('获取设备名称失败', err)
        }
      },
      createtask () {
        this.dialogFormVisible = false
        this.$router.push({path: '/manage/createTask'})
      },
      handleAdd () {
        this.selectTable = {
          task_id: '',
            perCount: '',
            dCount: '',
            pObject_id: '',
            status: 1,  // 新发布的任务默认为1
            warehouse_status: 0
        }
        this.getTaskList()
        this.getObject()
        this.dialogFormVisible = true
      },
      handleMonitor (row) {
        this.dialogFormVisible0 = true
        this.getMonitor(row.id)
      },
      handleStep (row) {
        this.dialogFormVisible1 = true
      },
      handleRetry (row) {
        stockOut(row.id).then(res => {
          alert(res.data)
        })
        this.initData()
      },
      freshTask () {
        debugger
        let row = this.MList.id
        this.getMonitor(row)
      },
      handleRefresh () {
        stockStatus()
        this.initData()
      },
      handleSelect (index) {
        this.selectIndex = index
        this.selectMenu = this.taskOptions[index]
      },
      handleSelectO (index) {
        this.selectIndexO = index
        this.selectMenuO = this.objectOptions[index]
      },
      async publishTask () {
        let postData = this.selectTable
        publishTask(postData).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.dialogFormVisible = false
            this.initData()
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '添加失败'
          })
          console.log('发布失败', error)
        })
      },
      async handleDelete (index, row) {
        publishDel(row.id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.DList.splice(index, 1)
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '删除失败,该任务已经发布，请先删除发布列表'
          })
          console.log('类型删除失败', error)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .el-button {
    margin: 5px;
  }
</style>
